<template lang="html">
  <section>
    <div class="input">
      <template v-if="type !== 'textarea'">
        <input ref="input" :value="currentValue" :disabled="disabled" @input="handleInput" class="input__field input__field--text" type="text"/>
        <label class="input__label input__label--text">
  				<span class="input__label-content input__label-content--text">{{label}}</span>
  			</label>
      </template>
      <template v-else>
        <textarea ref="textarea" :cols="cols" :value="currentValue" @input="handleInput" class="input__field input__field--textarea" style="width:100%;"/>
        <label class="input__label input__label--textarea">
  				<span class="input__label-content input__label-content--textarea">{{label}}</span>
  			</label>
      </template>
		</div>
  </section>
</template>

<script>

export default {
  props: {
    label: String,
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    cols: Number,
    disabled: false
  },
  data() {
    return {
      currentValue: this.value === undefined || this.value === null
        ? ''
        : this.value
    }
  },
  methods: {
    handleInput(event) {
      console.log(11);
      const value = event.target.value;
      this.$emit('input', value);
      this.setCurrentValue(value);
    },
    setCurrentValue(value) {
      this.currentValue = value;
    }
  }
}
</script>

<style scoped lang="scss">
section {
  float:left;
}
.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0;
	max-width: 400px;
	width: calc(100% - 2em);
	vertical-align: top;
  .input__field {
  	position: relative;
  	display: block;
  	float: right;
  	padding: 0.8em;
  	width: 60%;
  	border: none;
  	border-radius: 0;
  	background: #f0f0f0;
  	color: #aaa;
  	font-weight: bold;
    font-size: 1.4rem;
  	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  	-webkit-appearance: none; /* for box shadows to show on iOS */
  }
  .input__field:focus {
  	outline: none;
  }
  .input__label {
  	display: inline-block;
  	float: right;
  	padding: 0 2px;
  	width: 40%;
  	color: #6a7989;
  	font-weight: bold;
  	font-size: 1.5rem;
  	-webkit-touch-callout: none;
  	-webkit-user-select: none;
  	-khtml-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  }

  .input__label-content {
  	position: relative;
  	display: block;
  	padding: 1.6em 0;
  	width: 100%;
  }
  //text
  .input__field--text {
  	z-index: 10;
  	width: 100%;
  	background: transparent;
  	color: #2c626a;
  }

  .input__field--text:focus {
  	z-index: 10;
  	width: 100%;
  	background: transparent;
  	color: #f5f5f5;
  }
  // .input__field--text::before {
  // 	background: transparent;
  // 	color: #f5f5f5;
  // 	// opacity: 0;
  // 	-webkit-transition: color 0.3s;
  // 	transition: color 0.3s;
  // }
  // .input__field--text::after {
  // 	background: transparent;
  // 	color: #48a1af;
  // 	// opacity: 0;
  // 	-webkit-transition: color 0.3s;
  // 	transition: color 0.3s;
  // }

  .input__label--text {
  	position: relative;
  	width: 100%;
  	color: #2c626a;
  	text-align: left;
  }

  .input__label--text::before {
  	content: '';
  	position: absolute;
  	bottom: 100%;
  	left: 0;
  	width: 100%;
  	height: 40px;
  	background: #48a1af;
  	-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  	transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  	-webkit-transform-origin: 50% 100%;
  	transform-origin: 50% 100%;
  	-webkit-transition: -webkit-transform 0.3s;
  	transition: transform 0.3s;
  }

  .input__label--text::after {
  	content: '';
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 4px;
  	background: #2c626a;
  	-webkit-transform-origin: 50% 0%;
  	transform-origin: 50% 0%;
  	-webkit-transition: -webkit-transform 0.3s;
  	transition: transform 0.3s;
  }

  .input__label-content--text {
  	padding: 0.75em 0;
  }

  .input__field--text:focus,
  .input--filled .input__field--text {
  	opacity: 1;
  	-webkit-transition-delay: 0.3s;
  	transition-delay: 0.3s;
  }

  .input__field--text:focus + .input__label--text::before,
  .input--filled .input__label--text::before {
  	-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  	transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  }

  .input__field--text:focus + .input__label--text,
  .input--filled .input__label--text {
  	pointer-events: none;
  }

  .input__field--text:focus + .input__label--text::after,
  .input--filled .input__label--text::after {
  	-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
  	transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
  }
  //textarea
  .input__field--textarea {
  	z-index: 10;
  	width: 100%;
  	background: transparent;
  	color: #2c626a;
    -webkit-transition: color 0.3s;
  	transition: color 0.3s;
  }

  .input__field--textarea:focus {
  	z-index: 10;
  	width: 100%;
  	background: transparent;
  	color: #f5f5f5;
  }

  .input__label--textarea {
    position: relative;
    width: 100%;
    color: #2c626a;
    text-align: left;
  }

  .input__label--textarea::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 70px;
    background: #48a1af;
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
  }

  .input__label--textarea::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #2c626a;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
  }

  .input__label-content--textarea {
    padding: 0.75em 0;
  }

  .input__field--textarea:focus,
  .input--filled .input__field--textarea {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }

  .input__field--textarea:focus + .input__label--textarea::before,
  .input--filled .input__label--textarea::before {
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  }

  .input__field--textarea:focus + .input__label--textarea,
  .input--filled .input__label--textarea {
    pointer-events: none;
  }

  .input__field--textarea:focus + .input__label--textarea::after,
  .input--filled .input__label--textarea::after {
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
    transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
  }
}
</style>
